<template>
<div class="page-view-fund">
    <div class="title-line">
        <div class="title">{{title}}</div>
        <div class="btn-close" @click="btnClose"></div>
    </div>
    <div class="scoll-view">
      <table  class="table-view-alter">
        <thead>
            <th v-t="'fundManage.table1'">Ad Space</th>
            <th v-t="'fundManage.table2'">Ad Slots Num</th>
            <th style="text-align: center;" v-if="showLine">
              <span v-t="'fundManage.table3'">Margin</span>   <img  src="/images/adRelease/t-header.png" alt=""/>
            </th>
            <th v-t="'fundManage.table4'">Cycle(7 Days)</th>
        </thead>
        <tr v-for="(item,index) in dataList" :key="index">
            <td>
               {{item.adPlaceName}}
            </td>
            <td>
                {{item.placeRecordNum}}
            </td>
            <td v-if="showLine">
                <div class="cpc">{{item.amount?.decimalFourString||0}}</div>
            </td>
             <td>
              
              {{item.adCycle}}
            </td>
        </tr>
     </table>
    </div>
</div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed,onMounted,onBeforeUnmount } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import Tscroll from '@/components/Tscroll.vue'
import confirm from '@/utils/confirm.js'
import {toast,myOverlay} from '@/utils/common.js'
import { useI18n } from 'vue-i18n'

export default {
    components:{
       Tscroll
    },
    props:{
      dataList:[],
      showLine:{
          type:Boolean,
          default(){
              return true
          }
      },
      title:{
          type:String,
          default(){
              return 'Advertising Margin Details:'
          }
      }
    },
     emits:{  // 出发事件需要emits申明（vue3+）
        'close':null
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
        })

        const btnClose = ()=>{
            context.emit('close')  // 把元素传出去

        }
        return{
            ...toRefs(state),
            btnClose
        }
    }
}
</script>

<style lang="scss" scoped>
    .page-view-fund{
        width:90%;
        height:620px;
        position: absolute;
        z-index:999;
        left:50%;
        margin-left:-45%;
        top:50%;
        padding:20px;
        margin-top:-300px;
         background-image: url(/images/dgbg4.png);
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        overflow: hidden;
        .title-line{
            display: flex;
            justify-content: space-between;
            position: relative;
            padding:10px 20px;
            .title{
                font-size:28px;
                color:#fff;
            }
            .btn-close{
                background-image: url(/images/adRelease/close.png);
                background-position: center;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                height:40px;
                width:40px;
                z-index:99;
          }
        }
    }
    .scoll-view{
     overflow-y: auto;
     height:550px;
    }
    .table-view-alter{
        border: none;
        border-collapse: collapse;
        margin:20px 0 0 0;
        display: table;
         width: 100%;
         padding:10px 20px;
        thead{
             th{
                background-color: #2C5BA9;
             }
        }
        th{
            color:#ffffff50;
            font-size:22px;
            height:50px;
            line-height:50px;
            padding:4px 20px;
            font-family: Poppins-Medium;
            img{
                height:18px;
                margin-left:6px;
                vertical-align: middle;
            }
        }
        tr{
             border-bottom:1px solid #ffffff15;
        }
        td{
            padding:30px 20px;
            font-family: Poppins-Medium, Poppins;
            .line-view{
                display: flex;
                align-items: center;
                align-self: center;
                .check{
                    height:30px;
                    width:30px;
                    background-image: url(/images/adRelease/box.png);
                    background-position: center;
                    background-size: contain;
                    margin-right:20px;
                }
                .check.on{
                    background-image: url(/images/adRelease/gou.png);
                }
                img{
                    width:64px;
                    height:64px;
                    vertical-align: middle;
                    margin-right:20px;
                }
                .name{
                    font-size:26px;
                    color: #67F8FF;
                }
                .context{
                    font-size:22px;
                    color:#999;
                }

            }
             .strtime,
                .endtime{
                    font-size:22px;
                    color:#fff;
                }
                .cpc{
                    font-size:24px;
                    color:#FF6600;
                    font-weight: bold;
                    min-width:140px;
                    text-align: center;
                }
                .amount{
                    font-size:28px;
                    color:#fff;
                }
                .arrow-down {
                    height:0; 
                    border-left:10px solid transparent;
                    border-right:10px solid transparent;
                    border-top:10px solid #67F8FF;
                    width:10px;
                    margin:0 auto;
                }
             }
              .min-add-view{
                 color:#67F8FF;
                 font-size:24px;
              }
               .min-set-view{
                 color: #004AD9;
                 font-size:24px;
              }
             .min-set,
            .min-add{
                padding:15px;
                background-image: url(/images/adRelease/minadd.png);
                background-position: center;
                background-size: contain;
                background-repeat: no-repeat;
                margin-left:5px;
                
            }
             .min-set{
                background-image: url(/images/adRelease/set.png);
             }
      }
    

</style>